html-08 雪碧图 #

一、CSS hack #

1.属性hack _只有ie6及以下版本会显示这个属性；

*只有ie7及以下版本会显示这个属性；

\9 ie6及以上的ie浏览器显示这个属性(\9放在属性值的后面)

\0 ie8及以上版本显示这个属性；

2.选择符级hack;

*html只有ie6里面会显示；

*+html只有ie7里面会显示；

3.条件hack：用于选择ie浏览器及ie的不同版本。

if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

● 大于：选择大于指定版本的IE版本。关键字：gt（greater than）

● 大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）

● 小于：选择小于指定版本的IE版本。关键字：lt（less than）

● 小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）

● 非指定版本：选择除指定版本外的所有IE版本。关键字：!

只在IE中可见 代码示例：

<!--[if IE]>
<p>只在IE中能看到这个段落</p>
<![endif]-->



<!--[if IE 8]>
<style></style> //这里面写的只有ie8能显示
<![endif]-->

<!--[if IE]>
<p>只在IE中能看到这个段落</p>
<![endif]-->

二、用css的border设置三角形，在ie6里面不兼容的问题。 #

1.在ie6里面transparent不兼容，显示黑色。

解决办法，把需要设置透明的边框设置成点状或虚线。

2.在ie6里面设置左边或者右边的三角形，会少个尖儿。

是因为ie6里面的最小高度引起的问题。

解决办法：给这个元素设置font-size:0;line-height:0;overflow:hidden。

三、banner图布局 #

1.先切片将左右两边的宽度相等，留下中间的部分，如果页面宽度是1920，则设置宽度为100%； 2.切中间的一块，如果不准确，可以修改一下切片宽度，

四、大背景布局， #

五、透明 #

1.rgba 设置背景透明

a表示alpha取值：从0到1，数值越大，越不透明；

background:rgba(0,0,0,0.8);

2.ie浏览器兼容性

opacity 设置元素的不透明度。（元素文字都透明）

取值：从0到1，数值越大，越不透明

opacity: 0.5;

filter:alpha(opacity=50);

六、雪碧图，精灵图，css sprites； #

优点：

（1）减少网页的http请求，从而大大的提高页面的性能

（2）图片命名上的困扰。

（3）更换风格方便。

缺点：

（1）必须要限定容器大小，复合背景图元素位置需要计算。

（2）维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。

七、常用的图片格式 #

1.jpg 优点：色彩丰富，文件小。

缺点：有损压缩，反复保存，图片质量下降明显。

使用场景：色彩丰富的图片/渐变图像。

2.gif 优点：文件小，支持动画，透明，无兼容性问题。

缺点：只支持256种颜色，色彩简单的logo/icon/动图

使用场景：色彩简单的logo/icon/动图。

3.png 优点：无损压缩，支持透明，简单图片尺寸小。

缺点：不支持动画，色彩丰富的图片尺寸大。

使用场景：logo/icon/透明图。

面试题 #

● 用纯CSS实现小箭头的思路？

● 简述精灵图的原理及优缺点？

● 简述网页中常见图片格式及特点？